import Maincontainer from "@/components/maincontainer";
import { defineComponent, ref, Fragment, provide, inject, } from "vue"
import { NIcon } from "naive-ui"
import { RightOutlined, EllipsisOutlined, } from "@vicons/antd"
import { CheckboxIndeterminate16Regular } from "@vicons/fluent";


/*
    重写，分两个组件，
    一个外壳，管保存数据和注入函数
    另一个组件,管显示数据，递归显示
*/

const TreeItemComponent = defineComponent({
    name: "TreeItemComponent",
    props: {
        // 要显示的数据
        treeData: {
            type: Array,
            default: [],
        },
        keyField: {  // key字段
            type: String,
            default: "value",
        },
        labelField: {  // label字段
            type: String,
            default: "label",
        },
        cengji:{
            type: Number,
            default: 1,
        },
        textleft:{
            type:Number,
            default:20,
        },
    },
    setup({ treeData, keyField, labelField, cengji,textleft,},{slots}) {
         // 点击前面的三角
         const changeExtend = (e: MouseEvent, item: any) => {
            e.stopPropagation()
            e.preventDefault()
            item.extend = !item.extend
        }
        // 接收注入的点击函数
        const handleClick:Function = inject("handleClick")!
        return () => (<div class="w-full h-full overflow--hidden flex flex-col flex-shrink-0 overflow-hidden">
        {() => treeData.map((item1: any) => (<Fragment><div class={["w-full h-30px relative items-center cursor-pointer flex items-center pr-1 hover:bg-blue-200", item1.selected ? "bg-blue-400" : ""]} style={{paddingLeft:`${cengji*textleft + 4}px`}} onClick={() => handleClick(item1)}>
            {item1.children && item1.children.length > 0 ? <NIcon size={14} onClick={(e: MouseEvent) => changeExtend(e, item1)}>
                <RightOutlined class={["transform transition-all", item1.extend ? "rotate-90" : "rotate-0"]} />
            </NIcon> : <span class="w-14px h-14px" />}
            <span class="truncate mx-10px">{item1[labelField]}</span>
            {slots.rightslot ? slots.rightslot(item1): null}
        </div>
            {(Array.isArray(item1.children) && item1.children.length > 0) ? <div class={["w-full transform transition-all overflow-hidden"]} style={{ "height": `${item1.extend ? item1.children.length * 30 : 0}px` }}>
                <TreeItemComponent treeData={item1.children} keyField={keyField} labelField={labelField} cengji={cengji + 1}/>
            </div> : null}
        </Fragment>))}
    </div>)
    },
})

const TreeMainComponent = defineComponent({
    name: "TreeMainComponent",
    props: {
        // 要显示的数据
        treeData: {
            type: Array,
            default: [],
        },
        keyField: {  // key字段
            type: String,
            default: "value",
        },
        labelField: {  // label字段
            type: String,
            default: "label",
        },
        textleft:{
            type:Number,
            default:20,
        },
    },
    emits:["change"],
    setup({ treeData, keyField, labelField, textleft},{emit,slots}) {
        // 定义层级传递下去
        const index = 0
        // 扁平数据，操作都是在这里进行，免去每次递归查找的麻烦
        const bianpingshuju = ref<Array<any>>([])
        // 点击每个文件夹，不管是不是空的，都获取一遍所有的子文件和子文件夹
        const handleClick = (row: any) => {
            console.log("handleClick", row);
            bianpingshuju.value.forEach(item=>{
                item.selected = item.value === row.value
            })
            emit("change",{...row})
        }
        // 点击前面的三角
        const changeExtend = (e: MouseEvent, item: any) => {
            e.stopPropagation()
            e.preventDefault()
            item.extend = !item.extend
        }
        // 将选中函数注入到所有子组件内
        provide("handleClick", handleClick)

        // 初始化函数
        const init = () => {
            // 将树形数据转换成扁平数据
            const treeToArray = (list: Array<any>) => {
                list.forEach(item => {
                    bianpingshuju.value.push(item)
                    if (Array.isArray(item.children) && item.children.length > 0) {
                        treeToArray(item.children)
                    }
                })
            }
            treeToArray(treeData)
        }
        // 初始化区域
        init()
        return () => (<div class="w-full">
            <TreeItemComponent treeData={treeData} keyField={keyField} labelField={labelField} v-slots={{rightslot: slots.rightslot}} textleft={textleft} cengji={index}/>
        </div>)
    },
})




export default TreeMainComponent
